﻿<!DOCTYPE html>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>定位+坐标转换</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        body, button, input, select, textarea {
            font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
        }
    </style>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&libraries=convertor&key=XQSBZ-MYPKU-EJSVT-4XWSN-QWJXH-2TBDM"></script>
    <script>
        function G(id) {
            return document.getElementById(id);
        }
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            } else {
                x.innerHTML = "浏览器不支持定位.";
            }
        }

        function showPosition(position) {
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            var point = new qq.maps.LatLng(lat, lng);
            setlocalInfo(point);
            qq.maps.convertor.translate(point, 1, function (res) {
                var latlng = res[0];

                var map = new qq.maps.Map(document.getElementById("container"), {
                    center: latlng,
                    zoom: 16
                });
                var marker = new qq.maps.Marker({
                    map: map,
                    position: latlng
                });
                var infoWin = new qq.maps.InfoWindow({
                    map: map
                });

                qq.maps.event.addListener(marker, 'click', function (e) {

                    infoWin.open();
                    var content = '<div style="margin:0;line-height:20px;padding:2px;">'
                        //+ '<p>address：' + poi.address + '</p>'
                        //+ '<p>category：' + poi.category + '</p>'
                        //+ '<p>name：' + poi.name + '</p>'
                        //+ '<p>phone：' + poi.phone + '</p>'
                        + '<p>进度：' + e.latLng.lng + '</p>'
                     + '<p>维度：' + e.latLng.lat + '</p>'
                 + '</div>';
                    infoWin.setContent(content);
                    infoWin.setPosition(e.latLng);


                });


            });
        }


        function setlocalInfo(point) {
            G("p_lng").innerHTML = point.lng;
            G("p_lat").innerHTML = point.lat;
        }
    </script>

</head>
<body onload="getLocation()">
    <div style="width: 1003px; height: 600px" id="container"></div>
    <div id="txtpoint">
        <p>经度：<span id="p_lng"></span></p>
        <p>维度：<span id="p_lat"></span></p>
    </div>
    <p>用html5定位后，使用腾讯地图坐标转换接口纠偏，请允许获取位置。</p>
</body>
</html>
